<template>
  <div class="page-content">
    <div class="h2">概览</div>
    <a-spin :spinning="loading">
      <div class="mt flex-row gap">
        <StatItem v-for="(it, i) in stats" :key="i" :item="it" />
      </div>
    </a-spin>
  </div>
</template>

<script setup>

import { ref, onMounted } from 'vue';
import { getStatTotal } from '@/api/stat';
import StatItem from '@/components/StatItem.vue'

const loading = ref(false)
const stats = ref([])


onMounted(() => {
  load()
})

const load = async () => {
  loading.value = true
  const res = await getStatTotal()
  const rs = res.data || {}
  loading.value = false
  const arr = [{ title: '客户数量', value: rs.totalClient || 0, icon: '/icons/client.svg', color: 'red' },
  { title: '商家数量', value: rs.totalStore || 0, icon: '/icons/store.svg', color: 'blue' },
  { title: '机源数量', value: rs.totalItem || 0, icon: '/icons/car.svg', color: 'green' },
  { title: '咨询数量', value: rs.totalOrderDemand || 0, icon: '/icons/ask.svg', color: 'yellow' },
  ]
  stats.value = arr;
}


</script>

<style lang="less" scoped></style>